<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3d导航</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <style>
      a {
        text-decoration: none;
      }

      ul li {
        float: left;
        /* 视距 站在多元的地方来看里面的3D动画*/
        perspective: 300px;
        /* border: 1px solid red; */
      }

      ul {
        height: 50px;
        background-color: skyblue;
      }

      ul li .box {
        height: 50px;
        /* 创建一个 3D空间 */
        transform-style: preserve-3d;
        transition: transform 0.4s;
        /* 修改旋转的中心点 */
        transform-origin: 50% 50% -25px;
      }

      ul li .box a {
        display: block;
        height: 50px;
        line-height: 50px;
        color: #fff;
        padding: 0px 20px;
      }

      ul li .box a.front {
        background-color: skyblue;
      }

      ul li .box a.bottom {
        background-color: khaki;
        /* 设置旋转的中心点为 顶部的中间 */
        transform-origin: top center;
        /* X 轴负方向旋转90deg  */
        transform: rotateX(-90deg);
      }

      ul li:hover .box {
        /* X 轴正方向旋转90deg  */
        transform: rotateX(90deg);
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <div class="box">
          <a href="#" class="front">首页</a>
          <a href="#" class="bottom">首页</a>
        </div>
      </li>
      <li>
        <div class="box">
          <a href="#" class="front">前端开发</a>
          <a href="#" class="bottom">前端开发</a>
        </div>
      </li>
      <li>
        <div class="box">
          <a href="#" class="front">架构师</a>
          <a href="#" class="bottom">架构师</a>
        </div>
      </li>
      <li>
        <div class="box">
          <a href="#" class="front">关于我们</a>
          <a href="#" class="bottom">关于我们</a>
        </div>
      </li>
    </ul>
  </body>
</html>
